<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件案例1</title>
    <script src="js/vue.js"></script>
    <style>
        .itemStyle{
            border: 1px dashed #000;
            border-radius: 15px;
            padding: 10px;
            width: 220px;
            height: 260px;
            text-align: center;
            float: left;
            margin-right: 50px;
            margin-bottom: 50px;
            box-shadow:10px 10px 5px #888888;
        }
        .itemFont{
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis; 
            line-height: 32px;
        }

    </style>
</head>
<body>
    <template id="listTemplate">
        <div>
            <lessionitem></lessionitem>
            <lessionitem></lessionitem>
            <lessionitem></lessionitem>
            <lessionitem></lessionitem>
            <lessionitem></lessionitem>
        </div>
    </template>
    <template id="itemTemplate">
        <div class="itemStyle">
            <div>
                <img src="images/model2.png" width="200px" height="114px">
            </div>
            <div>
                <div class="itemFont">
                    第一阶段：Java核心编程
                </div>
                <div class="itemFont" style="color:#999">
                    知识要点：环境搭建，：环境搭建，基本数据类型，变量及去声明，运算符，流程控制语句，IDE绘制界面
                </div>
                <div style="color:red;text-align: right;margin-right: 15px;">线下专区</div>
                <div>
                    <img src="images/0.jpg" width="20px" height="20px">
                    <span>张三丰</span>
                    <span>18</span>
                </div>
            </div>
        </div>
    </template>
    <div id="app">
        <lessionlist></lessionlist>
        <lessionlist></lessionlist>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        components:{
            'lessionlist':{
                template:'#listTemplate',
                components:{
                    'lessionitem':{
                        template:'#itemTemplate'
                    }
                }
            }
        }
    });
</script>